<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/button.css">
</head>
<style>
    .area {
        border: 1px solid #ccc;
        border-width: 0 1px;
        background-image: url(./images/cloud-main-bg.png);
        display: flex;
        justify-content: space-between;
    }

    /* 右侧区域 */
    .area-right {
        width: 250px;
    }

    .area-right .area-login {
        height: 126px;
        background-image: url('./images/sprite_03.png');
        width: 250px;
    }

    .area-right .area-login p {
        margin: 0 22.5px;
        padding: 16px 0;
        line-height: 22px;
    }

    .area-right .area-login a {
        display: block;
        width: 100px;
        height: 31px;
        background-image: url('./images/sprite_03.png');
        background-position: 0 -195px;
        margin: 0 75px;
        text-align: center;
        color: aliceblue;
        line-height: 31px;
    }

    .area-right .area-login a:hover {
        background-position: -110px -195px;

    }

    .settle-singer {
        padding: 20px;
    }

    .settle-singer ul {
        margin-top: 6px;
        padding-top: 15px;
    }

    .settle-singer ul li {
        width: 210px;
        height: 62px;
        background-color: bisque;
        display: flex;
        margin-bottom: 15px;
        cursor: pointer;
    }

    .settle-singer ul li:hover .singer-info {
        background-color: rgb(244, 244, 244);
    }

    .settle-singer ul li img {
        width: 62px;
        height: 62px;
    }

    .singer-info {
        border: 1px solid #ccc;
        border-left: 0;
        width: 133px;
        padding-left: 14px;
        height: 62px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: rgb(250, 250, 250);
    }

    .singer-info h4 {
        font-size: 14px;
    }

    .singer-info p {
        margin-top: 8px;
        margin-right: 12px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .hot-up {
        padding: 20px;
    }

    .hot-up ul {
        margin-top: 6px;
        padding-top: 15px;
        box-sizing: border-box;
    }

    .hot-up ul li {
        box-sizing: border-box;
        width: 210px;
        height: 50px;
        display: flex;
        justify-content: space-between;
    }

    .hot-up ul li div {
        height: 40px;
        box-sizing: border-box;
        padding: 4px 0;
        margin-left: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        overflow: hidden;
    }

    .hot-up ul li img {
        width: 40px;
        height: 40px;
    }

    .hot-up ul li div p {
        color: #000;
        height: 50%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .hot-up ul li p a {
        color: #666;
    }

    /* 左侧区域 */
    .area-left {
        box-sizing: border-box;
        width: 729px;
        padding: 20px 20px 40px;
    }

    .area-left .hot-tuijian {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid #C10D0C;
    }

    .area-left .hot-tuijian .tuijian {
        display: flex;
        height: 35px;
        color: #333333;
        padding: 0px 10px 0px 34px;

        background-image: url(./images/sprite_03.png);
        background-position: -225px -156px;
        background-repeat: no-repeat;
    }

    .area-left .hot-tuijian .more {
        display: flex;
        align-items: center;
    }

    .area-left .hot-tuijian .more i {
        content: "";
        background-image: url(./images/sprite_03.png);
        background-position: 0 -240px;
        width: 12px;
        height: 12px;
        display: block;
        margin-left: 5px;
    }

    .area-left .hot-tuijian .more a:hover {
        text-decoration: underline;
    }

    .area-left .hot-tuijian .tuijian .title {
        font-size: 20px;
        line-height: 28px;
    }

    .tuijian ul {
        margin: 7px 0px 0px 20px;
        display: flex;
        color: #666;
    }

    .tuijian ul li a {
        font-size: 12px;
    }

    .tuijian ul li a:hover {
        text-decoration: underline;
    }

    .tuijian ul li span {
        margin: 0 10px;
    }

    .hot-module .hot-main {
        display: flex;
        flex-wrap: wrap;
    }

    .hot-module .hot-main li {
        position: relative;
        margin: 20px 42px 0 0;
        width: 140px;
    }

    .hot-module .hot-main li:nth-child(4n) {
        margin-right: 0px;
    }

    .hot-module .hot-main li img {
        display: block;
        width: 140px;
        height: 140px;
    }

    .hot-module .hot-main li .imgCover {
        width: 140px;
        height: 140px;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background-position: center;
        background-size: cover;
        background: url('./images/sprite_05_coverall.png') no-repeat 0 -20px;
    }

    .hot-module .hot-main li .text {
        display: block;
        margin-top: 5px;
        font-size: 14px;
        padding-bottom: 20px;

    }

    .hot-module .hot-main li .text i {
        display: inline-block;
        background: url('./images/sprite_07_icon.png') no-repeat -31px -658px;
        width: 35px;
        height: 15px;
        vertical-align: middle;
        margin: -2.5px 3px 0 0;
    }

    .hot-module .hot-main li .text:hover {
        text-decoration: underline;
    }

    .img-main {
        position: relative;
    }

    .img-cover-text {
        display: flex;
        align-items: center;
        z-index: 1;
        position: absolute;
        left: 0;
        bottom: 0;
        content: "";
        background: url('./images/sprite_05_coverall.png') no-repeat 0 -537px;
        width: 140px;
        height: 27px;
    }

    .img-cover-text .icon-headset {
        display: block;
        width: 14px;
        height: 11px;
        margin: 9px 5px 9px 10px;
        background: url('./images/sprit_06_iconall.png') no-repeat 0 -24px;
    }

    .icon-count {
        display: block;
        line-height: 27px;
        color: #cccccc;
    }

    .play {
        position: absolute;
        right: 5.5px;
        top: 5.5px;
        display: block;
        width: 16px;
        height: 17px;
        background: url('./images/sprit_06_iconall.png') no-repeat 0 0px
    }

    .play:hover {
        background-position: 0 -60px;
    }

    .new-song-list {
        border: 1px solid #ccc;
        height: 188px;
        background-color: #f5f5f5;
        margin: 20px 0 37px;
        box-sizing: border-box;
    }

    .new-song-list .inner {
        border: 1px solid rgb(247, 245, 245);
        height: 100%;
        box-sizing: border-box;
        padding: 0 20px;
        position: relative;
    }

    .control {
        position: absolute;
        display: block;
        width: 17px;
        height: 17px;
        background-image: url(./images/sprite_03.png);
        margin-top: -8.5px;
        top: 50%;
    }

    .control-right {
        right: 3px;
        background-position: -305px -77px;
    }

    .control-left {
        left: 3px;
        background-position: -265px -77px;
    }

    .new-song-list .inner .roller {
        height: 100%;
        display: flex;
        overflow: hidden;
    }

    .new-song-list .inner .roller .songp-list {
        margin-top: 24px;
        width: 100%;
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .new-song-list .inner .roller .songp-list li {
        width: 118px;
        height: 150px;
        background-image: url(./images/sprite_03.png);
        background-position: -260px 100px;
        background-repeat: no-repeat;
    }

    .new-song-list .inner .roller .songp-list li .album {
        position: relative;
        padding-bottom: 4px;
    }

    .new-song-list .inner .roller .songp-list li .album .cover {
        position: absolute;
        top: 0;
        left: 0;
        background-image: url(./images/sprite_05_coverall.png);
        background-position: 0 -570px;
        width: 118px;
        height: 100px;
    }

    .new-song-list .inner .roller .songp-list li .album .icon-paly {
        display: none;
        background-image: url(./images/sprit_06_iconall.png);
        background-position: 0 -85px;
        width: 22px;
        height: 22px;
        position: absolute;
        left: 72px;
        bottom: 10px;
    }

    .new-song-list .inner .roller .songp-list li .album:hover .icon-paly {
        display: inline-block;
    }

    .song-name:hover,
    .singer-name:hover {
        text-decoration: underline;
    }

    .singer-name {
        color: #666666;
    }

    .new-song-list .inner .roller .songp-list li p {
        width: 100px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .song-name {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .billboard-module .top-main {
        display: flex;
        margin-top: 20px;
        height: 472px;
        width: 689px;
        background-image: url(./images/index_bill.png);
        background-size: cover;
        overflow: hidden;
    }

    .top-item {
        width: 230px;
    }

    .top-header {
        box-sizing: border-box;
        padding: 20px 0 0 19px;
        height: 120px;
        display: flex;
    }

    .top-header .header-img {
        width: 80px;
        height: 80px;
        position: relative;
    }

    .top-header .header-img img {
        width: 100%;
        height: 100%;
        display: block;
    }

    .top-header .header-img a {
        background-image: url(./images/sprite_05_coverall.png);
        background-position: -145px -57px;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
    }

    .top-header .header-tit {
        width: 116px;
        height: 50.5px;
        margin: 6px 0 0 10px;
    }

    .top-header .header-tit .top-btn {
        margin: 10px 10px 0 0;
        display: inline-block;
        background-image: url(./images/sprite_03.png);
        width: 22px;
        height: 22px;
    }

    .top-header .header-tit h3 {
        font-size: 14px;
    }

    .top-header .header-tit .top-play {
        background-position: -267px -205px;
    }

    .top-header .header-tit .top-add {
        background-position: -300px -205px;
    }

    .top-item dd ol {
        margin-left: 12px;
    }

    .top-item dd ol .no {
        width: 35px;
        height: 32px;
        display: inline-block;
        text-align: center;
        font-size: 16px;
        line-height: 32px;
    }
    .top-item dd ol li{
        display: flex;
    }
    .top-item dd ol .song {
        height: 32px;
        display: inline-block;
        line-height: 32px;
        vertical-align: bottom;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        flex: 1;
    }
    .top-item dd ol .song:hover{
        text-decoration: underline;
    }
    .top-item dd ol li:nth-child(-n+3) span {
        color: #C10D0C;
    }
    .top-item dd ol li{
        overflow: hidden;
    }
    .top-item dd ol li .more{
        width: 198px;
        height: 32px;
        margin: 0 32px 0 0;
        text-align: right;
    }
    .top-item dd ol li .more a{
        line-height: 32px;
    }
    .top-item dd ol li .more a:hover{
        text-decoration: underline;
    }
    .top-item dd ol li:hover .song-btns{
        display: flex;
    }
    .song-btns{
        display: none;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
    }
    .song-btns a{
        margin-right: 5px;
        display: inline-block;
        width: 17px;
        height: 17px;
        background-image: url(./images/sprite_07_icon.png);
    }

    .song-btns a:nth-child(1){
        background-position: -45px -635px;
    }
    .song-btns a:nth-child(2){
        background-position: 2px -698px;
    }
    .song-btns a:nth-child(3){
        background-position: -44px -85.5px;
    }
</style>

<body>
    <div class="cloud-main">
        <div class="area warp_02">
            <div class="area-left">
                <!-- 头部 -->
                <div class="hot-module">
                    <div class="hot-tuijian">
                        <div class="tuijian">
                            <a href="#" class="title">热门推荐</a>
                            <ul>
                                <li>
                                    <a href="">华语</a>
                                    <span class="line">|</span>
                                </li>
                                <li>
                                    <a href="">流行</a>
                                    <span class="line">|</span>
                                </li>
                                <li>
                                    <a href="">摇滚</a>
                                    <span class="line">|</span>
                                </li>
                                <li>
                                    <a href="">民谣</a>
                                    <span class="line">|</span>
                                </li>
                                <li>
                                    <a href="">电子</a>
                                </li>
                            </ul>
                        </div>
                        <span class="more">
                            <a href="">更多</a>
                            <i></i>
                        </span>
                    </div>
                    <!-- 内容 -->
                    <ul class="hot-main">
                        <li>
                            <a href="" class="img-main">
                                <img src="./images/陆地太空人.jpg" alt="">
                                <span class="img-cover-text">
                                    <span class="icon-headset"></span>
                                    <span class="icon-count">132323万</span>
                                    <span href="" class="play"></span>
                                </span>
                            </a>
                            <a href="" class="text">曾经喜欢你，卑微到尘埃里</a>
                            <a href="" class="imgCover"></a>
                        </li>
                        <li>
                            <a href="" class="img-main">
                                <img src="./images/陆地太空人.jpg" alt="">
                                <span class="img-cover-text">
                                    <span class="icon-headset"></span>
                                    <span class="icon-count">132323万</span>
                                    <span href="" class="play"></span>
                                </span>
                            </a>
                            <a href="" class="text"><i></i>曾经喜欢你，卑微到尘埃里</a>
                            <a href="" class="imgCover"></a>
                        </li>
                        <li>
                            <a href="" class="img-main">
                                <img src="./images/陆地太空人.jpg" alt="">
                                <span class="img-cover-text">
                                    <span class="icon-headset"></span>
                                    <span class="icon-count">132323万</span>
                                    <span href="" class="play"></span>
                                </span>
                            </a>
                            <a href="" class="text"><i></i>Future Beats ◐ 糟糕，是心肌梗塞的感觉！</a>
                            <a href="" class="imgCover"></a>
                        </li>
                        <li>
                            <a href="" class="img-main">
                                <img src="./images/陆地太空人.jpg" alt="">
                                <span class="img-cover-text">
                                    <span class="icon-headset"></span>
                                    <span class="icon-count">132323万</span>
                                    <span href="" class="play"></span>
                                </span>
                            </a>
                            <a href="" class="text">曾经喜欢你，卑微到尘埃里</a>
                            <a href="" class="imgCover"></a>
                        </li>
                        <li>
                            <a href="" class="img-main">
                                <img src="./images/陆地太空人.jpg" alt="">
                                <span class="img-cover-text">
                                    <span class="icon-headset"></span>
                                    <span class="icon-count">132323万</span>
                                    <span href="" class="play"></span>
                                </span>
                            </a>
                            <a href="" class="text">曾经喜欢你，卑微到尘埃里</a>
                            <a href="" class="imgCover"></a>
                        </li>
                        <li>
                            <a href="" class="img-main">
                                <img src="./images/陆地太空人.jpg" alt="">
                                <span class="img-cover-text">
                                    <span class="icon-headset"></span>
                                    <span class="icon-count">132323万</span>
                                    <span href="" class="play"></span>
                                </span>
                            </a>
                            <a href="" class="text">曾经喜欢你，卑微到尘埃里</a>
                            <a href="" class="imgCover"></a>
                        </li>
                        <li>
                            <a href="" class="img-main">
                                <img src="./images/陆地太空人.jpg" alt="">
                                <span class="img-cover-text">
                                    <span class="icon-headset"></span>
                                    <span class="icon-count">132323万</span>
                                    <span href="" class="play"></span>
                                </span>
                            </a>
                            <a href="" class="text">曾经喜欢你，卑微到尘埃里</a>
                            <a href="" class="imgCover"></a>
                        </li>
                        <li>
                            <a href="" class="img-main">
                                <img src="./images/陆地太空人.jpg" alt="">
                                <span class="img-cover-text">
                                    <span class="icon-headset"></span>
                                    <span class="icon-count">1万</span>
                                    <span href="" class="play"></span>
                                </span>
                            </a>
                            <a href="" class="text">曾经喜欢你，卑微到尘埃里</a>
                            <a href="" class="imgCover"></a>
                        </li>
                        <!-- 为了防止flex布局导致的最后一列居中设置的两个li -->
                        <li></li>
                        <li></li>

                    </ul>
                </div>
                <div class="newSong-module">
                    <div class="hot-tuijian">
                        <div class="tuijian">
                            <a href="#" class="title">新碟上架</a>
                        </div>
                        <span class="more">
                            <a href="">更多</a>
                            <i></i>
                        </span>
                    </div>
                    <!-- 新碟上架的轮播图 -->
                    <div class="new-song-list">
                        <div class="inner">
                            <div class="roller">
                                <ul class="songp-list">
                                    <li>
                                        <div class="album">
                                            <img src="./images/法老_专辑封面.jpg" alt="">
                                            <div class="cover"></div>
                                            <a href="" class="icon-paly"></a>
                                        </div>
                                        <p>
                                            <a href="" class="song-name">退333323232333333333潮</a>
                                        </p>
                                        <p>
                                            <a href="" class="singer-name">法老</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="album">
                                            <img src="./images/法老_专辑封面.jpg" alt="">
                                            <div class="cover"></div>
                                            <a href="" class="icon-paly"></a>
                                        </div>
                                        <p>
                                            <a href="" class="song-name">退333323232333333333潮</a>
                                        </p>
                                        <p>
                                            <a href="" class="singer-name">法老</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="album">
                                            <img src="./images/法老_专辑封面.jpg" alt="">
                                            <div class="cover"></div>
                                            <a href="" class="icon-paly"></a>
                                        </div>
                                        <p>
                                            <a href="" class="song-name">退333323232333333333潮</a>
                                        </p>
                                        <p>
                                            <a href="" class="singer-name">法老</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="album">
                                            <img src="./images/法老_专辑封面.jpg" alt="">
                                            <div class="cover"></div>
                                            <a href="" class="icon-paly"></a>
                                        </div>
                                        <p>
                                            <a href="" class="song-name">退333323232333333333潮</a>
                                        </p>
                                        <p>
                                            <a href="" class="singer-name">法老</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="album">
                                            <img src="./images/法老_专辑封面.jpg" alt="">
                                            <div class="cover"></div>
                                            <a href="" class="icon-paly"></a>
                                        </div>
                                        <p>
                                            <a href="" class="song-name">退333323232333333333潮</a>
                                        </p>
                                        <p>
                                            <a href="" class="singer-name">法老</a>
                                        </p>
                                    </li>

                                </ul>
                                <ul class="songp-list">
                                    <li>1</li>
                                    <li>2</li>
                                </ul>
                            </div>
                            <a href="" class="control control-left"></a>
                            <a href="" class="control control-right"></a>
                        </div>
                    </div>
                </div>
                <div class="billboard-module">
                    <div class="hot-tuijian">
                        <div class="tuijian">
                            <a href="#" class="title">榜单</a>
                        </div>
                        <span class="more">
                            <a href="">更多</a>
                            <i></i>
                        </span>
                    </div>
                    <div class="top-main">
                        <dl class="top-item">
                            <dt class="top-header">
                                <div class="header-img">
                                    <img src="./images/飙升榜.jpg" alt="">
                                    <a href="" class="cover"></a>
                                </div>
                                <div class="header-tit">
                                    <h3>飙升榜</h3>
                                    <a href="" class="top-btn top-play"></a>
                                    <a href="" class="top-btn top-add"></a>
                                </div>
                            </dt>
                            <dd>
                                <ol>
                                    <li>
                                        <span class="no">1</span>
                                        <a href="" class="song">大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">2</span>
                                        <a href="" class="song">如果大海能够</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">3</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">4</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">5</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">6</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">7</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">8</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">9</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">10</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="more">
                                            <a href="">查看更多></a>
                                        </div>
                                    </li>
                                </ol>
                            </dd>
                        </dl>
                        <dl class="top-item">
                            <dt class="top-header">
                                <div class="header-img">
                                    <img src="./images/新歌榜.jpg" alt="">
                                    <a href="" class="cover"></a>
                                </div>
                                <div class="header-tit">
                                    <h3>新歌榜</h3>
                                    <a href="" class="top-btn top-play"></a>
                                    <a href="" class="top-btn top-add"></a>
                                </div>
                            </dt>
                            <dd>
                                <ol>
                                    <li>
                                        <span class="no">1</span>
                                        <a href="" class="song">大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">2</span>
                                        <a href="" class="song">如果大海能够</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">3</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">4</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">5</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">6</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">7</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">8</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">9</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">10</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="more">
                                            <a href="">查看更多></a>
                                        </div>
                                    </li>
                                </ol>
                            </dd>
                        </dl>
                        <dl class="top-item">
                            <dt class="top-header">
                                <div class="header-img">
                                    <img src="./images/原创榜.jpg" alt="">
                                    <a href="" class="cover"></a>
                                </div>
                                <div class="header-tit">
                                    <h3>原创榜</h3>
                                    <a href="" class="top-btn top-play"></a>
                                    <a href="" class="top-btn top-add"></a>
                                </div>
                            </dt>
                            <dd>
                                <ol>
                                    <li>
                                        <span class="no">1</span>
                                        <a href="" class="song">大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">2</span>
                                        <a href="" class="song">如果大海能够</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">3</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">4</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">5</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">6</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">7</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">8</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">9</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">10</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="more">
                                            <a href="">查看更多></a>
                                        </div>
                                    </li>
                                </ol>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="area-right">
                <div class="area-login">
                    <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                    <a href="#">用户登录</a>
                </div>
                <div class="settle-singer">
                    <div class="header-small">
                        <h3>入驻歌手</h3>
                        <a href="#">查看更多&gt;</a>
                    </div>
                    <ul>
                        <li>
                            <img src="./images/张惠妹.jpg" alt="">
                            <div class="singer-info">
                                <h4>张惠妹aMEI</h4>
                                <p>台湾歌手张惠妹</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/张惠妹.jpg" alt="">
                            <div class="singer-info">
                                <h4>张惠妹aMEI</h4>
                                <p>台湾歌手张惠妹</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/张惠妹.jpg" alt="">
                            <div class="singer-info">
                                <h4>张惠妹aMEI</h4>
                                <p>台湾歌手2222222222222222张惠妹</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/张惠妹.jpg" alt="">
                            <div class="singer-info">
                                <h4>张惠妹aMEI</h4>
                                <p>台湾歌手张惠妹</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/张惠妹.jpg" alt="">
                            <div class="singer-info">
                                <h4>张惠妹aMEI</h4>
                                <p>台湾歌手张惠妹</p>
                            </div>
                        </li>
                    </ul>
                    <a class="apply" href="#">
                        <i class="apply-tent">申请成为网易音乐人</i>
                    </a>
                </div>
                <div class="hot-up">
                    <div class="header-small">
                        <h3>热门主播</h3>
                    </div>
                    <ul>
                        <li>
                            <img src="./images/陈立.jpg" alt="">
                            <div>
                                <p><a href="#">陈立</a></p>
                                <p>心理学家、美食家陈立教授</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/陈立.jpg" alt="">
                            <div>
                                <p><a href="#">陈立</a></p>
                                <p>男女双人全创作独立乐团</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/陈立.jpg" alt="">
                            <div>
                                <p><a href="#">陈立</a></p>
                                <p>32131231313232323232323232323131</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/陈立.jpg" alt="">
                            <div>
                                <p><a href="#">陈立</a></p>
                                <p>32131231313232323232323232323131</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/陈立.jpg" alt="">
                            <div>
                                <p><a href="#">陈立</a></p>
                                <p>32131231313232323232323232323131</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>